<template>

		<view class="Card-item" >
			<img :src="type=='course' ? item.cover : item.avatar" alt="" class="item-img" mode="widthFix">
				<block v-if="type=='course'">
					<text class="item-title">{{item.title}}</text>
					<view class="item-people">
						<uni-icons type="fire" size="20" color="#f00"></uni-icons>&nbsp;
						<text>占位{{item.lessonNum}}人已学习</text>
					</view>
					<view class="item-info">
						<text class="info-price">￥{{item.price}}</text>&nbsp;
						<text class="info-people">{{item.viewCount}}人购买</text>
					</view>
				</block>
				<block v-else>
					<navigator :url="`/pages/Oneteacher/Oneteacher?id=${item.id}`" class="teachinfo">{{item.intro}}</navigator>
					<navigator :url="`/pages/Oneteacher/Oneteacher?id=${item.id}`" class="teachname">{{item.name}}</navigator>
				</block>
			
			
		</view>
	

</template>

<script lang="ts" >
	
	export default defineComponent({
		name:'vue-Card-item'
	})
</script>

<script setup lang="ts">
	import {defineComponent} from 'vue'
	const props = defineProps(['item','type'])
</script>
<style lang="less">
	.Card-item{
		
		width:335upx;
		background-color: #eee;
		margin-top: 20upx;
		.item-img{
			width: 100%;
			// height: 188upx;
		}
		.item-title{
			font-weight: bold;
			font-size: 29upx;
		}
		.item-people{
			font-size: 27upx;
		}
		.item-info{
			.info-price{
				font-size: 29upx;
				color: rgb(252, 0, 0);
				font-weight:bold;
			}
			.info-people{
				font-size: 27upx;
				color: gray;
			}
		}
		.teachinfo{
			font-size: 26upx;
			font-weight: bold;
			white-space: pre-wrap;
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		.teachname{
			font-weight: bold;
			color:#00cc99;
			font-size: 30upx;
			padding:6px;
		}
	}
</style>
